@import (reference) "~ui/styles/config";
@import (reference) "~ui/styles/mixins";
@import (reference) "~ui/styles/themes";


.settings-row-component {
	display: flex;

	&:not(:last-of-type) {
		margin-bottom: 1rem;
	}

	> :first-child {
		flex: 0 0 auto;
		width: 33.333%;
		margin-right: 1.5rem;

		> * {
			@icon-width: 1.25rem;
			@icon-full-width: 1.5rem;

			margin: 0;

			&:first-child {
				margin-left: @icon-full-width;

				> i.fa {
					width: @icon-width;
					margin: 0 (@icon-full-width - @icon-width) 0 -@icon-full-width !important;
				}
			}

			&:not(:first-child) {
				margin-left: @icon-full-width;
				margin-bottom: .25rem;
				font-size: .75em;

				&.section {
					margin-top: .15rem;
					margin-bottom: .10rem;
				}
			}

			&.text-overflow {
				.text-overflow();
			}
		}

		i.fa {
			width: 1em;
			text-align: center;

			&:first-child {
				margin-right: .25em;
			}

			&.fa-gamepad {
				font-size: 1em;
				line-height: 1;
			}
		}

		> .substitutions-list {
			display: flex;
			flex-wrap: wrap;

			> li {
				margin-right: .25em;

				&:last-of-type {
					margin-right: 0;
				}
			}
		}

		.cursor-help {
			cursor: help;
		}

		.hoverable {
			@padding: .25em;

			margin-left: -@padding;
			padding: 0 @padding;
			white-space: nowrap;

			&:hover {
				.theme({
					.theme-color-and-background( @theme-settings-descr-docs-color-hover, @theme-settings-descr-docs-background-hover );
				});
			}
		}
	}

	> :not(:first-child) {
		flex-grow: 1;

		p {
			margin: 0;

			&:not(:first-child) {
				margin-top: 1em;
			}
		}
	}

	// fade out default text color a bit while not hovering
	& {
		> :first-child > :not(:first-child) {
			&,
			& i.fa {
				transition: color .333s ease-out;
			}
		}
	}
	&:not(:hover) {
		> :first-child > :not(:first-child) {
			.theme({
				.theme-mix-color( @theme-settings-descr-color, @theme-background );

				i.fa {
					.theme-mix-color( @theme-settings-descr-docs-icon-color, @theme-background );
				}
			});
		}
	}
}
